<template>
  <navbar title="团报组别" :isBack="true"></navbar>
  <loading v-if="!info"></loading>
  <template v-else>
    <view class="title">团报名称：{{ info.name }}</view>
    <view class="group">选择组别</view>
    <view class="list flex-direction-column">
      <view class="item flex-space-between" v-for="item in info.group" :key="item.id" @click="itemClick(item)">
        <text class="one-line">{{ item.name }}</text>
        <text>{{ tools.isFree(item.price) }}</text>
        <image v-if="item.enroll_state" src="/pagesA/static/image/37.png"></image>
        <image v-else src="/pagesA/static/image/38.png"></image>
      </view>
    </view>
    <view class="line"></view>
    <view class="time flex-space-between">
      <text>团报截止日期</text>
      <text>{{ info.end_time }}</text>
    </view>
    <view class="line"></view>
  </template>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTeamGroup } from '@/service/api/index'
import tools from '@/utils/tools'
let id = ref(0)
let info = ref(null)
// 团报组别
const getTeamGroupApi = async (id) => {
  const { msg } = await getTeamGroup({ id })
  info.value = msg
}

const itemClick = (item) => {
  if (item.type == 1) return tools.navTo('/pagesA/entry/single?params=' + JSON.stringify({ id: item.id, team_id: id.value }))
  console.log(item)
}

onLoad((option) => {
  id.value = option.id
  getTeamGroupApi(option.id)
})
</script>

<style lang="scss" scoped>
.title {
  font-size: 32rpx;
  font-weight: bold;
  line-height: 40rpx;
  padding: 20rpx 26rpx 36rpx 26rpx;
}
.group {
  height: 80rpx;
  color: #777777;
  font-size: 28rpx;
  padding: 20rpx 26rpx;
  background: #f9f9f9;
}
.list {
  padding-bottom: 40rpx;
  .item {
    height: 150rpx;
    position: relative;
    border-radius: 10rpx;
    padding: 56rpx 36rpx;
    background: #f9f9f9;
    border: 1px solid #eeeeee;
    margin: 40rpx 26rpx 0 26rpx;
    image {
      top: 10rpx;
      right: 24rpx;
      width: 96rpx;
      height: 47rpx;
      position: absolute;
    }
    text {
      line-height: 20px;
      &:nth-child(1) {
        font-size: 28rpx;
      }
      &:nth-child(2) {
        font-size: 32rpx;
        font-weight: bold;
      }
    }
  }
}
.time {
  padding: 30rpx 26rpx;
  text {
    font-size: 28rpx;
  }
}
.parse {
  margin-top: 80rpx;
}
</style>
